<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>polymer::events</title>
  <meta charset="utf-8">
  <script src="../../polymer.js"></script>
</head>
<body>
  
  <h3>See console for results:</h3>
  
  <h4>Custom element using declarative events</h4>
  
  <x-basic>
    <div style="background: white;">Click distributed node!  (expected: local and host handler fires;
      without event path, only host event fires.)</div>
  </x-basic>
  
  <element name="x-basic" on-click="hostClickHandler">
    <template>
      <style>
        @host {
          * {
            display: block;
            padding: 20px;
            background: beige;
          }
        }
        div {
          padding: 20px;
          margin: 10px;
          background: whitesmoke;
        }
      </style>
      <div on-click="localClickHandler">Click shadowDOM node! (expected: local and host handler fire)</div>
      <div on-click="localDistributedClickHandler">
        <content></content>
      </div>
    </template>
    <script>
      Polymer.register(this, {
        hostClickHandler: function(inEvent, inDetail, inSender) {
          console.log('clicked on host!', this.localName, inEvent);
        },
        localClickHandler: function(inEvent, inDetail, inSender) {
          console.log('clicked on local div!', this.localName, inEvent);
        },
        localDistributedClickHandler: function(inEvent, inDetail, inSender) {
          console.log('clicked on local div around an insertion point!', this.localName, inEvent);
        }
      });
    </script>
  </element>

  <h4>Composed custom elements using declarative events</h4>

  <x-simple-composed></x-simple-composed>
  
  <element name="x-simple-composed" on-click="hostClickHandler">
    <template>
      <style>
        @host {
          * {
            display: block;
            padding: 20px;
            background: lightgreen;
          }
        }
        
        div {
          background: lightgreen;
        }
        
      </style>
      <x-basic>
        <div on-click="localClickHandler">Try clicking me!  (expected:
          local, local, host, host;
          without event path, only host events fires.)</div>
      </x-basic>
    </template>
    <script>
      Polymer.register(this, {
        hostClickHandler: function(inEvent, inDetail, inSender) {
          console.log('clicked on host!', this.localName, inEvent);
        },
        localClickHandler: function(inEvent, inDetail, inSender) {
          console.log('clicked on local div!', this.localName, inEvent);
        }
      });
    </script>
  </element>


</body>
</html>
